<!-- 侧边栏内容 -->
<template>
  <el-aside class="asidesty" :width="asidedata.iszedie ? '69px' : '260px'">
    <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse="asidedata.iszedie"
      :collapse-transition="false" router="true" default-active="/manner/userdata">
      <h3 v-if="!asidedata.iszedie" class="yonghuguanli" :class="aniclass"> <img :src="srcurl" style="width: 50px; vertical-align:middle;">用户管理</h3>
      <el-menu-item index="/manner/userdata" style="font-size: 17px;">
        <el-icon style="font-size: 22px;">
          <HomeFilled />
        </el-icon>
        <span>主页</span>
      </el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon style="font-size: 22px;">
            <Platform />
          </el-icon>
          <span style="font-size: 17px;">用户管理</span>
        </template>
        <el-menu-item index="/manner/home" style="font-size: 17px;">
          <el-icon style="font-size: 22px;">
            <UserFilled />
          </el-icon>用户数据
        </el-menu-item>
        <el-menu-item  index="/manner/gl" style="font-size: 17px;" v-if="loginuser.isone">
          <el-icon style="font-size: 22px;">
            <UserFilled />
          </el-icon>管理员数据
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/manner/map" style="font-size: 17px;">
        <el-icon style="font-size: 22px;">
          <Promotion />
        </el-icon>
        <span>地图</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script lang="js" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { navdata } from "@/stores/index.js";
import { ref, onMounted } from "vue";
import { loguser } from "@/stores/loginuserdata.js";
const aniclass = {
  animate__fadeIn: true,
  animate__animated: true
}
const loginuser = loguser()

const asidedata = navdata();
const srcurl = ref('https://i.postimg.cc/QxWVxwyB/Apeks-Logo-Infobox.png');

</script>


<style  scoped>
.yonghuguanli {
  margin-top: 20px;
  text-align: center;
  color: aliceblue;
  font-size: 26px;
  margin-bottom: 15px;
}

.tac {
  width: 460px;
}

.asidesty {
  height: 94vh;
  overflow: hidden;
  background-color: rgb(85, 92, 100);
}

.el-menu {
  border: none !important;
}

</style>
